@import '../global.less';

.el-menu {
  position: relative;
  padding-left: 0;
  margin: 0;

  .count {
    display: inline-block;
    padding: 0 6px;
    line-height: 18px;
    font-size: 14px;
    color: #fff;
    background-color: @red-color;
    border-radius: @radius*6;
    -webkit-transform: scale(.8);
    transform: scale(.8);
  }

}

.el-menu::after,
.el-menu::before {
  display: table;
  content: "";
}

.el-menu::after {
  clear: both;
}

.el-menu-item,
.el-submenu__title {
  position: relative;
  height: 45px;
  line-height: 45px;
  padding: 0 20px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.el-submenu__title {
  font-size: 14px;
  color: @bg-color;
  vertical-align: middle;
  background-color: @menu-title-color;
  border-bottom: 1px solid @menu-bg-color;
  -webkit-transition: border-color .3s,background-color .3s,color .3s;
  transition: border-color .3s,background-color .3s,color .3s;

  &:hover {
    background-color: @menu-hover-color;
  }

  i {

    vertical-align: middle;
  }

  span {
    margin-left: 8px;
  }

  .el-submenu__icon-arrow {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -9px;
    font-size: 12px;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s;
  }
}

.el-menu-item {
  height: 45px;
  padding-right: 10px;
  line-height: 45px;
  font-size: 14px;
  color: @bg-color;
  opacity: .68;
  vertical-align: middle;
  -webkit-transition: border-color .3s,background-color .3s,color .3s;
  transition: border-color .3s,background-color .3s,color .3s;

  &:focus,
  &:hover {
    outline: 0;
    background-color: @menu-hover-color;
  }

  &.is-active {
    color: #fff;
    opacity: 1;
    background-color: @base-color;
  }

  span {
    padding-left: 12px;
  }
}

.el-submenu {
  &.is-active {
    .el-menu {
      display: block !important;
    }
  }
}

.el-submenu.is-active > .el-submenu__title .el-submenu__icon-arrow,
.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}

.is-active,
.is-opened {
  .el-submenu__title {
    color: #fff;
    background-color: @hover-color;
    border-bottom-width: 0;
  }
}
